/**
 * Created by 居胜 on 2016/6/3.
 *
 * Overlay作为父元素，包含了dialog
 * 在显示的时候，改变overlay这个父元素的display, 同时父元素也是作为背景存在的
 */

+function () {

    //选择器函数
    var $ = function (selector) {
        return document.querySelector(selector);
    };

    //浮动层构造函数
    var Overlay = function(element){
        this.overlay = element;
        this.isShow = false;

        //为了在回调函数中使用this
        var self = this;
        //点击取消按钮，关闭
        this.overlay.addEventListener('click', function (event) {
            if(event.target.classList.contains("cancel")){
                self.hide();
            }
        });
        this.show();
        this.escape();
        this.drag();
    };

    //隐藏弹出层
    Overlay.prototype.hide = function () {
        if(this.isShow){
            this.overlay.style.display = "none";
            this.isShow = false;
        }
    };

    //显示弹出层
    Overlay.prototype.show = function () {
        if(!this.isShow) {
            this.overlay.style.display = "block";
            this.isShow = true;
        }
    };
    
    //点击透明的背景退出
    Overlay.prototype.escape = function () {
        var self = this;

        //事件代理，因为dialog是overlay的子元素，点击dialog也会冒泡到overlay
        //防止点击dialog时关闭，currentTarget, 肯定为overlay
        this.overlay.addEventListener('click', function (event) {
            if(event.target == event.currentTarget){
                self.hide();
            }
        }, false);

        //按下esc, 关闭
        document.body.addEventListener('keyup', function (event) {
            if(event.keyCode == 27){
                self.hide();
            }

        });
    };

    //拖动事件
    Overlay.prototype.drag = function () {
        var self = this,

        //left, top, 保存元素的位置
        //currentX, currentY, 鼠标的当前位置
        //flag, 标志量， 是否处于拖动中
            params = {
                left : 0,
                top : 0,
                currentX : 0,
                currentY : 0,
                flag : false
            };

        //获取相关CSS属性，这个很重要
        var getCss = function(o,key){
            return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
        };


        //obj->触发拖拽的对象， target->t拖拽的对象
        var startDrag = function (obj, target) {
            obj.onmousedown = function (e) {
                params.flag = true;

                params.left = getCss(target, 'left')
                params.top = getCss(target, "top");
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };

            //拖拽中
            document.onmousemove = function (e) {
                //点击了触发拖拽的对象
                if(params.flag){
                    var disX = e.clientX - params.currentX,
                        disY = e.clientY - params.currentY;

                    target.style.left = parseInt(params.left) + disX + 'px';
                    target.style.top = parseInt(params.top) + disY + 'px';
                }
            };

            //拖拽完成，松开鼠标
            document.onmouseup = function () {
                params.flag = false;
            }
        };

        startDrag($("#dialog-header"), $("#overlay-dialog"));
    };

    //监听Button点击事件
    document.addEventListener('click', function (event) {
        //点击的元素是否有 data-target属性
        var dataset = event.target.dataset;
        if(dataset.target){
            //overlay的id, 初始化弹出层
            var targetName = '#' + dataset.target;
            new Overlay($(targetName));
        }
    })
}();